<template>
	<view class="content">
		<!-- <page-head :title="title"></page-head> -->
		<view class="title-first">
			是否手术
		</view>
		<view class="button-box">
			<view @click="select(0)" class="button" :style="{backgroundColor:btnColorLF,color:btnTextColorLF}">
				否
			</view>
			<view @click="select(1)" class="button" :style="{backgroundColor:btnColorRF,color:btnTextColorRF}">
				是
			</view>
		</view>
		<view class="title-second">
			手术时间
		</view>
		<view class="warp">
			<picker-view v-if="visible" :indicator-style="indicatorStyle" :mask-style="maskStyle" :value="value"
				@change="bindChange" class="picker-view">
				<picker-view-column>
					<view class="item" v-for="(item,index) in years" :key="index" :class="[index===curr?'select':'']">
						{{item}}年</view>
					<!-- <view class="item" v-for="(item,index) in years" :key="index">{{item}}年</view> -->
				</picker-view-column>
				<picker-view-column>
					<view class="item" v-for="(item,index) in months" :key="index" :class="[index===currM?'select':'']">
						{{item}}月</view>
					<!-- <view class="item" v-for="(item,index) in months" :key="index">{{item}}月</view> -->
			 </picker-view-column>
				<picker-view-column>
					<view class="item" v-for="(item,index) in days" :key="index" :class="[index===currD?'select':'']">
						{{item}}日</view>
					<!-- <view class="item" v-for="(item,index) in days" :key="index">{{item}}日</view> -->
				</picker-view-column>
			</picker-view>
		</view>
		<view class="btn-box">
			<view @click="jump(0)" class="btn-box">
				<bigBtn :btnBoxWidth="btnBoxWidthL" :btnBoxHeight="btnBoxHeightL" :btnColor="btnColorL"
					:btnImgSrc="btnImgSrcL" :btnText="btnTextL" :btnTextColor="btnTextColorL"
					:btnTextSize="btnTextSizeL" :btnImgWidth="btnImgWidthL" :btnRadius="btnRadiusL">
				</bigBtn>
			</view>
			<view @click="jump(1)" class="btn-box">
				<bigBtn :btnBoxWidth="btnBoxWidthR" :btnBoxHeight="btnBoxHeightR" :btnColor="btnColorR"
					:btnImgSrc="btnImgSrcR" :btnText="btnTextR" :btnTextColor="btnTextColorR"
					:btnTextSize="btnTextSizeR" :btnImgWidth="btnImgWidthR" :btnRadius="btnRadiusR">
				</bigBtn>
			</view>
		</view>
	</view>
</template>

<script>
	import bigBtn from '@/components/bigButton.vue';
	import checkBtn from '@/components/checkButton.vue';
	export default {
		components: {
			bigBtn,
			checkBtn
		},
		data() {
			const date = new Date()
			const years = []
			const year = date.getFullYear()
			const months = []
			const month = date.getMonth() + 1
			const days = []
			const day = date.getDate()

			for (let i = 1990; i <= date.getFullYear(); i++) {
				years.push(i)
			}

			for (let i = 1; i <= 12; i++) {
				months.push(i)
			}

			for (let i = 1; i <= 31; i++) {
				days.push(i)
			}
			return {
				title: 'picker-view',
				years,
				year,
				months,
				month,
				days,
				day,
				value: [9999, month - 1, day - 1],
				/**
				 * 解决动态设置indicator-style不生效的问题
				 */
				visible: true,
				// indicatorStyle: `height: ${Math.round(uni.getSystemInfoSync().screenWidth/(750/100))}px;`
				indicatorStyle: `height: 50px;`,
				// #ifdef MP-KUAISHOU
				maskStyle: "padding:10px 0",
				// #endif
				// #ifndef MP-KUAISHOU
				maskStyle: "",
				// #endif

				btnBoxWidthLF: 200,
				btnBoxHeightLF: 100,




				btnBoxWidthL: 300,
				btnBoxHeightL: 300,
				btnColorL: "#FD6D62",
				btnImgSrcL: "../../../../static/icon/my_module/healthInfo/LBack.png",
				btnTextL: "上一步",
				btnTextColorL: "#ffffff",
				btnTextSizeL: 30,
				btnImgWidthL: 90,
				btnRadiusL: 140,

				btnBoxWidthR: 300,
				btnBoxHeightR: 300,
				btnColorR: "#FD6D62",
				btnImgSrcR: "../../../../static/icon/my_module/healthInfo/RBack.png",
				btnTextR: "下一步",
				btnTextColorR: "#ffffff",
				btnTextSizeR: 30,
				btnImgWidthR: 90,
				btnRadiusR: 140,

				btnCheckBoxW: 200,
				btnCheckBoxH: 100,
				btnColorLF: "#FD6D62",
				btnTextColorLF: "#ffffff",
				btnColorRF: "#f5f5f5",
				btnTextColorRF: "#999999",
				isSurgery: false,
				curr: 0,
				currM: 0,
				currD: 0
			}
		},
		methods: {
			select(index) {
				let me = this;
				if (index == 0) {
					me.btnColorLF = "#FD6D62";
					me.btnTextColorLF = "#f5f5f5"

					me.btnColorRF = "#f5f5f5";
					me.btnTextColorRF = "#999999";
					me.isSurgery = false;
				} else if (index == 1) {
					me.btnColorLF = "#f5f5f5";
					me.btnTextColorLF = "#999999"

					me.btnColorRF = "#FD6D62";
					me.btnTextColorRF = "#f5f5f5";
					me.isSurgery = true;
				}
			},
			bindChange(e) {
				const val = e.detail.value
				this.curr = val[0];
				this.currM = val[1];
				this.currD = val[2];
				this.year = this.years[val[0]]
				this.month = this.months[val[1]]
				this.day = this.days[val[2]]
			},
			jump(index) {
				let me = this;
				let data = {};
				if (index == 1) {
					data = uni.getStorageSync("tempHealth");
					data = data ? data : {};
					if (me.isSurgery == true)
						data.surgerytime = me.year + '年' + me.month + '月' + me.day + "日";
					else
						data.surgerytime = "不手术";
					console.log(data.surgerytime)
					uni.setStorageSync("tempHealth", data);
					uni.navigateTo({
						url: '../ill-details/ill-details'
					})
				} else {
					uni.navigateBack({
						delta: 1
					})
				}
			}
		}
	}
</script>

<style>
	@import url("surgery-time.css");
</style>
